<!-- 用户端我的问诊 -->
<template>
	<view class="container">
		<!-- 1.标题  --累计咨询：{{userPostList.length}}次 -->
		<uni-nav-bar title="我的问诊" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
		<!-- tab栏 -->
		<view class="top-title-view">
			<view class="tab">
				<view :class="tabIndex===index?'item active-color':'item'" v-for="(item,index) in tabList" :key="index"
					@click="selectTab(index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="center">
			<containerItem :myPostList="myPostList" :tabIndex="tabIndex" @scrollView="scrollView"></containerItem>
		</view>
		<!-- 底部tabbar -->
		<bottomTabar></bottomTabar>
	</view>

</template>

<script>
	import bottomTabar from '../../components/bottom-tabaruser/index.vue'
	import containerItem from '../../components/container-item/index.vue'
	import myPostApi from '@/api/socialized-servce/specialist-consultation/user-module/my-interrogation/index.js'
	export default {
		components: {
			bottomTabar,
			containerItem
		},
		data() {
			return {
				page: 1,
				size: 10,
				isshowModal: false,
				newReplyList: [],
				newReplyNum: 0,
				userPostList: [],
				tabList: ['未回复', '已回复'],
				tabIndex: 0,
				myPostList: [],
				type: ''
			}
		},
		mounted() {
			let id = uni.getStorageSync('consultationTabIndex')
			if(id === 1) {
				this.getResolvePost()
				this.tabIndex = 1
			} else {
				this.getUnresolvePost()
				this.tabIndex = 0
			}
			
		},
		onLoad(e) {
			this.type = e.type
		},
		methods: {
			goHome() {
				if(this.type) {
					uni.switchTab({
						url: '/pages/socialized-service/person-message/person-message'
					})
				} else {
					uni.reLaunch({
						url: '/pages/socialized-service/selection-system/selection-system'
					})
				}
			},
			// tab切换
			selectTab(index) {
				this.page = 1
				this.myPostList = []
				if (index === 0) {
					this.getUnresolvePost()
					this.tabIndex = 0
				} else {
					this.getResolvePost()
					this.tabIndex = 1
				}
				uni.setStorageSync('consultationTabIndex', this.tabIndex)
			},
			// 未回复问诊
			async getUnresolvePost() {
				let params = {
					page: this.page,
					size: this.size,
					condition: {
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					}
				}
				let res = await myPostApi.queryNoReqlyList(params)
				if (res.code == 200) {
					let arr = res.data.content
					this.total = res.data.totalElements
					this.myPostList = [...this.myPostList, ...arr]
					// 置顶帖子
					this.myPostList.sort((a, b) => {
					   if (a.topFlag && !b.topFlag) {
					     return -1;
					   } else if (!a.topFlag && b.topFlag) {
					     return 1;
					   } else {
					     return 0;
					   }
					 })
				}
			},
			// 已回复
			async getResolvePost() {
				let params = {
					page: this.page,
					size: this.size,
					condition: {
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					}
				}
				let res = await myPostApi.queryReplyList(params)
				if (res.code == 200) {
					let arr = res.data.content
					this.total = res.data.totalElements
					this.myPostList =  [...this.myPostList, ...arr]
					// 置顶帖子
					this.myPostList.sort((a, b) => {
					   if (a.topFlag && !b.topFlag) {
					     return -1;
					   } else if (!a.topFlag && b.topFlag) {
					     return 1;
					   } else {
					     return 0;
					   }
					 })
				}
			},
			// 触底
			scrollView() {
				if (this.tabIndex === 0) {
					if (this.total > this.myPostList.length) {
						this.page++
						this.getUnresolvePost()
					} else {
						console.log('触底');
						return
					}
				} else {
					if (this.total > this.myPostList.length) {
						this.page++
						this.getResolvePost()
					} else {
						console.log('触底');
						return
					}
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉');
				this.page = 1
				this.myPostList = []
				if (this.tabIndex === 0) {
					this.getUnresolvePost()
				} else if (this.tabIndex === 1) {
					this.getResolvePost()
				}
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 1000)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F5F6FA;

		.top-title-view {
			position: fixed;
			width: 692rpx;
			height: 58rpx;
			margin-top: 20rpx;
			padding: 0 32rpx;
			z-index: 99;

			.tab {
				display: flex;
				width: 100%;
				height: 100%;
				background-color: #E2E2E2;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				overflow: hidden;

				.item {
					height: 100%;
					width: 50%;
					background-color: #E2E2E2;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #818181;
					text-align: center;
					line-height: 58rpx;
				}

				.active-color {
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					color: #fff;
					background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
				}
			}
		}

		.center {
			padding: 0 40rpx;
			margin-top: 114rpx;
		}
	}
</style>